<template>
	<view class="rf-index">
		<view>
			<!-- 轮播图1 -->
			<view class="swiper">
				<view class="swiper-box">
					<rf-swipe-dot :info="bannerList" mode="nav" :current="current" field="desc">
						<swiper @change="handleDotChange" autoplay="true">
							<swiper-item v-for="(item, index) in bannerList" :key="index">
								<view class="swiper-item"><image :src="item.url" mode="aspectFill" /></view>
							</swiper-item>
						</swiper>
					</rf-swipe-dot>
				</view>
			</view>
			<!-- 分类列表 -->
			<swiper
				:indicator-active-color="themeColor.color"
				indicator-color="#666"
				:indicator-dots="pcategoryList.length > 10"
				:style="{ height: pcategoryList.length <= 5 ? '200rpx' : '400rpx' }"
				class="category-list-wrapper"
				v-if="pcategoryList.length > 0"
			>
				<swiper-item class="category-list" v-for="(fItem, fIndex) in swipeCateList" :key="fIndex">
					<view class="category" v-for="(sItem, sIndex) in fItem" :key="sIndex" @tap.stop="navToCategory(sItem)">
						<view class="img"><image :src="sItem.icon || errorImage" mode="aspectFill"></image></view>
						<view class="text in1line">{{ sItem.name }}</view>
					</view>
				</swiper-item>
			</swiper>

			<view v-for="(item, index) in homeProducrList" :key="index">
				<rf-floor-index :cover="item.cover" :icon="item.icon" :list="item.data" :header="{ title: item.title, desc: item.desc }" />
			</view>

			<!--推荐商品-->
			<!-- <rf-floor-index icon="icontuijian21" :list="recommendProductList" :header="{ title: '推荐商品', desc: 'Recommend Product' }" /> -->
			<!--热门商品-->
			<!-- <rf-floor-index icon="iconremen2" :list="hotProductList" :header="{ title: '热门商品', desc: 'Hot Product' }" /> -->
			<!--猜您喜欢-->
			<!-- <rf-floor-index icon="iconcainixihuan2" :list="guessYouLikeProductList" :header="{ title: '猜您喜欢', desc: 'Guess You Like It' }" /> -->
		</view>
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
		<rf-back-home></rf-back-home>
	</view>
</template>
<script>
/**
 * @des 赛奥华商城首页
 * @author stav stavyan@qq.com
 * @date 2020-01-08 14:14
 * @copyright 2019
 */
import { reqEntryList, reqProductList, reqBannerList, reqHomeProduct } from '@/api';
import rfSwipeDot from '@/components/rf-swipe-dot';
import rfFloorIndex from '@/components/rf-floor-index';
import rfSwiperSlide from '@/components/rf-swiper-slide';
import { mapMutations } from 'vuex';
export default {
	components: {
		rfFloorIndex,
		rfSwipeDot,
		rfSwiperSlide
	},
	data() {
		return {
			current: 0, // 轮播图index
			hotProductList: {}, // 热门商品列表
			recommendProductList: {}, // 推荐商品列表
			guessYouLikeProductList: {}, // 猜您喜欢商品列表
			share: {},
			loading: true,
			scrollTop: 0,
			errorImage: this.$mAssetsPath.errorImage,
			appName: this.$mSettingConfig.appName,
			pcategoryList: [],
			bannerList: [],
			homeProducrList: []
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShow() {
		// 初始化购物车数量
		this.setCartNum(uni.getStorageSync('cartNum'));
		this.initData();
	},
	computed: {
		// 分类的展示形式数据拼接
		swipeCateList() {
			const list = this.pcategoryList;
			let result = [];
			for (let i = 0, len = list.length; i < len; i += 10) {
				result.push(list.slice(i, i + 10));
			}
			return result;
		}
	},
	onShareAppMessage() {
		let shareParams = { title: this.share.share_title || `欢迎来到${this.appName}`, path: '/pages/index/index' };
		return shareParams;
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getIndexList('refresh');
	},
	// 加载更多
	onReachBottom() {},
	methods: {
		...mapMutations(['setCartNum']),
		// 监听轮播图切换
		handleDotChange(e) {
			this.current = e.detail.current;
		},
		// 数据初始化
		initData() {
			// 获取商品分类
			this.getPcategoryList();
			// 获取轮播
			this.getBannerList();
			// 获取主页数据
			this.getIndexList();
			// 设置购物车数量角标
			this.initCartItemCount();
		},
		// 设置购物车数量角标
		async initCartItemCount() {
			if (this.$mStore.getters.hasLogin && parseInt(uni.getStorageSync('cartNum'), 10) > 0) {
				uni.setTabBarBadge({
					index: this.$mConstDataConfig.cartIndex,
					text: uni.getStorageSync('cartNum').toString()
				});
			} else {
				uni.removeStorageSync('cartNum');
				uni.removeTabBarBadge({ index: this.$mConstDataConfig.cartIndex });
			}
		},
		// 通用跳转
		navTo(route) {
			this.$mRouter.push({ route });
		},
		// 跳转至分类模块
		navToCategory(sItem) {
			const { web_link, id } = sItem;
			this.navTo(`/pages/product/adopt-product?cate_id=${id}`);
			//
			// if (!web_link) {
			// 	this.navTo(`/pages/product/adopt-product?cate_id=${id}`);
			// } else {
			// 	this.$mHelper.toast('敬请期待~~~');
			// }

		},
		// 获取主页数据
		async getIndexList(type) {
			// const recommendProductList = await this.$http.get(reqProductList, {
			// 	// category_id: 1
			// });
			// const hotProductList = await this.$http.get(reqProductList, {
			// 	// category_id: 2
			// });
			// const guessYouLikeProductList = await this.$http.get(reqProductList, {
			// 	// category_id: 3
			// });
			// Promise.all([recommendProductList, hotProductList, guessYouLikeProductList])
			// 	.then(res => {
			// 		console.log(res);
			// 		const recommendProductList = res[0];
			// 		this.recommendProductList = recommendProductList;
			// 		const hotProductList = res[1];
			// 		this.hotProductList = hotProductList;
			// 		const guessYouLikeProductList = res[2];
			// 		this.guessYouLikeProductList = guessYouLikeProductList;

			// 		this.loading = false;
			// 		if (type === 'refresh') {
			// 			uni.stopPullDownRefresh();
			// 		}
			// 	})
			// 	.catch(err => {
			// 		this.loading = false;
			// 		if (type === 'refresh') {
			// 			uni.stopPullDownRefresh();
			// 		}
			// 	});
			this.$http
				.get(reqHomeProduct)
				.then(res => {
					console.log('reqHomeProduct', res);
					this.loading = false;
					this.homeProducrList = res;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				})
				.catch(err => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		// 获取分类列表
		async getPcategoryList() {
			await this.$http
				.get(reqEntryList, {})
				.then(async response => {
					this.pcategoryList = response;
				})
				.catch(() => {});
		},
		// banner 轮播
		async getBannerList() {
			await this.$http
				.get(reqBannerList, {})
				.then(async response => {
					this.bannerList = response;
				})
				.catch(() => {});
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $page-color-base;
}
.rf-index {
	background-color: $color-white;
	/*轮播图*/
	.swiper {
		width: 100%;
		margin-bottom: 20upx;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 92%;
			height: 40vw;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 40vw;
				swiper-item {
					image {
						width: 100%;
						height: 40vw;
					}
				}
			}
		}
	}

	/*分类列表*/
	.category-list-wrapper {
		.category-list {
			width: 100%;
			padding: $spacing-base;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.category {
				margin-top: 10upx;
				width: calc(20% - 20upx);
				height: 132upx;
				display: flex;
				text-align: center;
				flex-wrap: wrap;
				.img {
					width: 100%;
					display: flex;
					justify-content: center;
					image {
						width: 12vw;
						height: 12vw;
						border-radius: 50%;
					}
				}
				.text {
					margin-top: 16upx;
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 24upx;
					color: #3c3c3c;
				}
			}
		}
	}
}
</style>
